<template>
    <view style="position: relative; height: 100vh;" :class="[carshow ? 'main' : '']">
        <view style="display: flex;flex-direction: column;justify-content: center; align-items: center;">
            <!-- 上部内容 -->
            <!-- 商品信息 -->
            <scroll-view scroll-y="true" class="scroll-y padding">
                <view style=" display: flex;flex-direction: column;">
                    <view style=" display: flex; align-items: center;">
                        <view class="" style=" display: flex;">
                            <view class=""><image mode="aspectFill" style="width: 120rpx;height: 120rpx;" :src="obj.image"></image></view>
                            <view style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 20rpx;">
                                <text style="width: 140rpx; font-size: 30rpx;color: #333333; white-space: nowrap;">{{ obj.title }}</text>
                                <text style="font-size: 30rpx;color: #F07203;font-weight: 700;">￥{{ jiage ? jiage : obj.price }}</text>
                            </view>
                        </view>
                    </view>

                    <view class="model">
                        <view class="" style="margin-bottom: 10rpx;">详情:</view>

                        <block v-for="(item, index) in obj.params" :key="index">
                            <view style="display: flex; margin-bottom: 5rpx;">
                                <view
                                    style="height: 50rpx; width: 33%; background-color: #F5FBFF;font-size: 26rpx; line-height: 50rpx;text-align: center;"
                                >
                                    {{ item.title }}
                                </view>
                                <view
                                    style="height: 50rpx; width:66%; background-color: #F5FBFF;font-size: 26rpx ; margin-left: 5rpx;line-height: 50rpx;text-align: center;"
                                >
                                    {{ item.content }}
                                </view>
                            </view>
                        </block>
                    </view>
                    <view style="width: 702rpx;height: 1px;background-color: #F7F8FF;margin-top: 20rpx;"></view>

                    <block v-if="tt == 1">
                        <!-- 分割线 -->

                        <!-- 规格 -->
                        <text class="a_c" style="margin-top: 20rpx;font-size: 28rpx;color: #333333;align-self: flex-start;">型号</text>

                        <!-- 规格item -->
                        <view
                            style="font-size: 24rpx;text-align: center;line-height: 56rpx;
							padding-left: 25rpx;padding-right: 25rpx;background-color: #F7F8FF;align-self: flex-start;margin-top: 20rpx;"
                            v-for="(item, index) in obj.sku_price"
                            :key="index"
                            @click="btnmol(item, index)"
                            :class="[index == ind ? 'caruncheck' : '']"
                        >
                            <text>{{ item.xinghaoName }}</text>
                        </view>

                        <!-- 颜色 -->
                        <text class="a_b" style="margin-top: 60rpx;font-size: 28rpx;color: #333333;align-self: flex-start;">颜色</text>

                        <!-- 颜色规格的容器 -->
                        <view style="width: 100%; display: flex;flex-wrap: wrap;">
                            <view
                                :class="[index == inds ? 'caruncheck' : '']"
                                style="font-size: 24rpx;text-align: center;line-height: 56rpx;
									padding-left: 25rpx;padding-right: 25rpx;background-color: #F7F8FF;align-self: flex-start;margin-right: 24rpx;margin-top: 20rpx; "
                                v-for="(item, index) in yanselist"
                                :key="index"
                                @click="btncor(item.id, index, item)"
                            >
                                <text>{{ item.yanseName }}</text>
                            </view>
                        </view>

                        <!-- <view v-else style="width: 100%; display: flex;flex-wrap: wrap;">
							<view
								style="font-size: 24rpx;text-align: center;line-height: 56rpx;
									padding-left: 25rpx;padding-right: 25rpx;background-color: #F7F8FF;align-self: flex-start;margin-right: 24rpx;margin-top: 20rpx; "
							>
								<text></text>
							</view>
						</view> -->
                    </block>
                </view>
            </scroll-view>

            <!-- <button type="default" @click="test"> 测试</button> -->
            <!-- 底部悬浮 -->
            <view style="width: 702rpx;height: 60rpx; display: flex;justify-content: space-between;position: fixed;bottom: 20rpx;">
                <!-- 价格 -->
                <view style="display: flex;line-height: 60rpx;text-align: center;">
                    <view style="color: #333333;font-size: 30rpx;">定金：</view>
                    <view style="color: #F07203;font-size: 40rpx; " class="t-price">{{ obj.dingjin }}</view>
                </view>
                <!-- 按钮 -->
                <view style="display: flex;font-size: 28rpx;line-height: 60rpx;">
                    <view
                        style="width: 180rpx;height: 60rpx;text-align: center;color: #4D4D4D;background-color: #CCCCCC;margin-right: 15rpx;"
                        @click="GO('home')"
                    >
                        我再想想
                    </view>
                    <view style="width: 180rpx;height: 60rpx;text-align: center;color: #FFFFFF;background-color: #4B9EFF;" @click="btnpull()">
                        确定预约
                    </view>
                </view>
            </view>
        </view>
        <view style="position: absolute;" class="coupons" v-if="carshow">
            <view class="couponsbox">
                <scroll-view :scroll-y="true" :enable-flex="true" :show-scrollbar="false">
                    <view
                        style="position: relative; margin: 16rpx 0; z-index: 1; width: 600rpx; height: 146rpx; overflow: hidden;"
                        v-for="(item, index) in carTableList"
                        :key="index"
                        @click="carchoose(item.user_coupons_id, index, item.amount)"
                    >
                        <view class="introduce">
                            <!-- :class="ind === index ? 'couponsbt' :'couponsbt_a' " -->
                            <text>{{ item.amount }}</text>
                            <image src="../static/coupons.png" mode="aspectFill" style="width: 600rpx; height: 146rpx;"></image>

                            <!-- :class="ind === index ? 'couponsbtt' :'couponsbt_b' " -->
                            <text>优惠劵</text>
                        </view>
                        <view class="fw">
                            <text>{{ item.name }}</text>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            action: 'http://qiche.qianjiwl.xyz/addons/shopro/index/upload',
            carshow: false, //控制优惠卷栏展示隐藏
            // cardlist:[],//优惠卷
            //ind:0,//选中优惠劵 这个不需要了  效果是点击优惠劵，改变字体颜色
            user_couponesid: '', //存优惠劵id
            amountt: '', //优惠劵金额
            carTableList: [], //优惠劵数组
            indexx: 0,
            orderid: 0, //颜色id
            carimg: '',
            cartitle: '',
            carprice: '',
            // infoList:[{yanseName: "黑色"},{yanseName: "绿色"}],
            obj: {}, //接收上一个页面传过来的值
            btnmodel: 0, //型号点击
            btncolor: 0, //颜色点击
            ind: 0, //型号样式
            inds: 0, //颜色样式
            yanselist: [],
            carid: '',
            jiage: '',
            databox: {},

            typeList: [
                {
                    title: '2019款1.9T自动四驱尊享版7座',
                },
                {
                    title: '2019款1.9T自动四驱******尊享版7座',
                },
                {
                    title: '2019款1.9T自动四驱尊享版7座',
                },
                {
                    title: '2019款1.9T自动四驱**尊享版5座',
                },
                {
                    title: '2019款1.9T自动四驱尊享版7座',
                },
                {
                    title: '2019款1.9T自动四驱尊享版7座',
                },
            ],
            colorTypeList: [
                {
                    title: '红色',
                },
                {
                    title: '黑色',
                },
                {
                    title: '白色',
                },
                {
                    title: '深海蓝',
                },
            ],
            tt: '',
        };
    },
    onLoad() {
        console.log('this.$Route.query**********: ', this.$Route.query);
        this.obj = this.$Route.query.name; //对象
        this.tt = this.$Route.query.tt; //对象
        console.log('this.tt :>> ', this.tt);
        // sku_price obj里面的数组，存储规格
        // this.dingyi();

        // let objar = this.obj;
        // objar.forEach((item,index) => {
        // 	var objarr = [];
        // 	// if(item.)
        // 	console.log("this.obj: ",this.obj);
        // })
        //console.log('this.obj: ', this.obj);
        this.carid = this.$Route.query.id;
        // this.orderPre();
        this.id = this.$Route.query.id;

        // this.getCarData();

        this.getCardList(); //获取优惠劵
    },
    methods: {
        success1(e) {
            console.log('e: ', e);
        },
        success2(e) {
            console.log('e: ', e);
        },
        success3(e) {
            console.log('e: ', e);
        },
        btnmol(e, i) {
            // debugger;
            console.log('e: ', e, i);
            this.ind = i;
            this.yanselist = e.yanseList;
        },
        btncor(id, i, item) {
            this.jiage = item.jiage;
            //console.log('item :>> ', item);
            this.orderid = id;
            this.inds = i;
        },
        GO(type) {
            this.$Router.pushTab({
                name: type,
            });
        },
        // 优惠卷
        async getCardList() {
            let res;
            try {
                res = await this.$request.post('addons/shopro/coupons/lists');
            } catch (e) {
                //TODO handle the exception
                console.log('e===', e);
                return uni.showToast({
                    title: '网络连接失败！',
                    icon: 'none',
                });
            }

            this.carTableList = res.data.data;
            let carTableList = this.carTableList;
            var arr = [];

            carTableList.forEach((item, index) => {
                // console.log("item: ",item);
                if (item.amount !== '' && item.status_name === '未使用') {
                    arr.push(item);
                }
                return;
            });
            console.log('arr: ', arr);
            this.carTableList = arr;
            // console.log('card===',this.cardlist );
        },
        carchoose(user_coupons_id, index, amount) {
            //优惠劵选择
            console.log('user_coupons_id: ', user_coupons_id);
            console.log('amount :>> ========优惠劵', amount);
            this.user_couponesid = user_coupons_id; //存放优惠劵id
            // this.amountt = amount
            if (amount == '' && 0) {
                console.log('amount :>> 111111111111', amount);
                this.amountt = 0;
            } else {
                console.log('amount :>> 222222222222', amount);
                this.amountt = amount;
            }
            //this.ind = index;//处理选中优惠劵 样式
            console.log('this.ind: ', this.ind);
            if (this.user_couponesid !== '') {
                let _this = this;
                uni.showModal({
                    title: '确定选中',
                    success(e) {
                        if (e.confirm) {
                            _this.carshow = false;
                            console.log('_this.user_couponesid : ', _this.user_couponesid);
                            setTimeout(() => {
                                _this.$Router.push({
                                    name: 'information',
                                    params: {
                                        obj: _this.obj,
                                        id: _this.orderid, //颜色id
                                        carid: _this.carid, //选好的车id
                                        user_coupons_id: _this.user_couponesid,
                                        // user_coupons_id: 1,
                                        amountt: _this.amountt, //优惠劵
                                    },
                                });
                            }, 1000);
                        } else if (e.cancel) {
                            _this.carshow = true;
                            _this.user_couponesid = '';
                            console.log('_this.user_couponesid : ', _this.user_couponesid);
                        }
                        console.log('e: ', e);
                    },
                });
            }
            return;
        },
        // 判断有没有返回型号数据
        btnpull() {
            console.log('this.carTableList: 捕捉数据0', this.obj.sku_price);
            console.log('this.carTableList: 捕捉数据0', this.obj.sku_price[0].yanseList);
            console.log('this.carTableList: 捕捉数据1', this.obj.sku_price[0].yanseList);
            // console.log("this.carTableList: 捕捉数据2",this.obj.sku_price.yanseList.id);
            // this.orderid = this.obj.sku_price[0].yanseList[0].id;
            if (this.obj.sku_price[0].yanseList.length) {
                console.log('11 :>> ', 11);
                // debugger;
                this.orderid = this.obj.sku_price[0].yanseList[0].id;
                console.log('this.obj.sku_price[0].yanseList[0].id: ', this.obj.sku_price[0].yanseList[0].id);
            } else {
                console.log('2222 :>> ', 2222);
                this.orderid = this.obj.sku_price[0].yanseList.id;
            }
            // if(!this.obj.sku_price[0].yanseList[0]){
            // 	this.orderid = this.obj.sku_price[0].yanseList[0].id;
            // }
            if (this.carTableList.length) {
                this.carshow = true;
            } else {
                this.carshow = false;
                setTimeout(() => {
                    this.$Router.push({
                        name: 'information',
                        params: {
                            obj: this.obj,
                            id: this.orderid,
                            carid: this.carid,
                            user_coupons_id: 0,
                            amountt: 0,
                        },
                    });
                }, 1000);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.scroll-y {
    height: calc(100vh - 100rpx);
}
.ac {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #333333;
    align-self: flex-start;
}
.flex-box {
    height: 90rpx;
    margin-top: 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #eeeeee;
}
.flex-boxx {
    //height: 90rpx;//
    margin-top: 25rpx;
    display: flex;
    flex-direction: column;
    border-bottom: 1rpx solid #eeeeee;
}
.model {
    .model-info {
        display: inline-block;
        padding: 10rpx 20rpx;
        border-radius: 10rpx;
        margin: 10rpx 0;
        background-color: #eeeeee;
    }
}

.ab {
    margin-top: 60rpx;
    font-size: 28rpx;
    color: #333333;
    align-self: flex-start;
}

.caruncheck {
    color: #007aff;
}

.carselected {
    color: #333333;
}

.main {
    background: rgba(16, 15, 16, 0.5) !important;
    z-index: 99 !important;
}

.coupons {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #0949b9;
    // margin-left: -327rpx;
    // margin-top: -232rpx;
    z-index: 999;

    .couponsbox {
        padding: 38rpx 29rpx 40rpx 31rpx;
        width: 100%;
        // height: 100%;

        .introduce {
            text:nth-of-type(1) {
                position: absolute;
                left: 171rpx;
                top: 35rpx;
                font-size: 34rpx;
                font-weight: bold;
                width: 121rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: inline-block;
                z-index: 2;

                &.couponsbt {
                    color: #ccc;
                }

                &.couponsbt_a {
                    color: #fd012a;
                }
            }

            text:nth-of-type(2) {
                position: absolute;
                left: 32rpx;
                top: 50rpx;
                font-weight: bold;

                &.couponsbtt {
                    color: #ccc;
                }

                &.couponsbt_B {
                    color: #000;
                }
            }
        }

        .fw {
            border: 1px solid #70c1ff;
            position: absolute;
            overflow: hidden;
            left: 178rpx;
            top: 97rpx;
            padding: 2rpx;

            text {
                white-space: nowrap;
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #1c8de4;
                // transform: scale(1.2);
            }
        }
    }
}
</style>
